<template>
    <div class="user_list">
<!--        用户日志页面-->
<!--        查询-->
            <el-form class="form">
            <el-form-item>
                <template slot="label">
                    <span style="font-weight:700" class="slot">用户ID:</span>
                </template>
                <el-input v-model="formInline.id" name="id"></el-input>
            </el-form-item>
            <el-form-item>
                <template slot="label">
                    <span style="font-weight:700" class="slot">用户名:</span>
                </template>
                <el-input v-model="formInline.region" name="user"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
            </el-form>
<!--        表格-->
        <div class="list" style="width:99%;">
            <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
            >
                <el-table-column
                        prop="id"
                        label="id"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="userName"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="realName"
                        label="真实姓名"
                        width="357">
                </el-table-column>
                <el-table-column
                        prop="content"
                        label="动态"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间"
                        width="180">
                </el-table-column>
            </el-table>
        </div>
<!--        分页-->
        <div class="block" style="margin-top:20px;">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage4"
                    :page-sizes="[10, 20, 30, 50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="zong">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                //查询的参数
                formInline: {
                    id:"",
                    region:""
                },
                loading: false,
                //表格数据
                tableData:[],
                //分页 第几页
                currentPage4:1,
                //总共多少条数据
                zong:10,
                //一个页面有多少条数据
                pageSize:10,
                all:[]
            }
        },
        mounted() {
            //页面初始化时的数据
            this.aa();
        },
        methods: {
            aa(){
                let obj = {
                    "userId":null,
                    "userName":null,
                    "pageIndex": 1,
                    "pageSize":10
                }
                this.qq(obj)
            },
            //请求的方法
            qq(obj){
                this.axios({
                    url:"/api/admin/user/event/page/list",
                    method:"post",
                    data:obj
                }).then(res=>{
                    if(res.data.code==1){
                        this.zong = res.data.response.total;
                        this.tableData = res.data.response.list;
                    }
                })
            },
            //查询
            onSubmit() {
                let obj = {
                    "userId":this.formInline.id,
                    "userName":this.formInline.region,
                    "pageIndex": 1,
                    "pageSize":this.pageSize
                }
                this.qq(obj);
                this.time()
            },
            //点击一页有多少条
            handleSizeChange(val) {
                let obj = {
                    "userId":null,
                    "userName":null,
                    "pageIndex": 1,
                    "pageSize":val
                }
                this.qq(obj);
                this.time()
            },
            //点击分页
            handleCurrentChange(val) {
                if(this.formInline.region == ""){
                    let obj = {
                        "userId":null,
                        "userName":null,
                        "pageIndex":val,
                        "pageSize":10
                    }
                    this.qq(obj)
                }else{
                    let obj = {
                        "userId":null,
                        "userName":this.formInline.region,
                        "pageIndex":val,
                        "pageSize":10
                    }
                    this.qq(obj)
                }
                this.time();
            },
            //加载
            time(){
                this.loading = true;
                setTimeout(()=>{
                    this.loading = false;
                },1000)
            },
        }
    }
</script>
<style lang="scss" scoped>
    ::v-deep .el-form{
        display:flex !important;
        align-items: center;
    }
    ::v-deep .el-form-item{
        margin-right:20px;
        display:flex !important;
    }
    .user_list{
        padding:0 20px 20px 20px;
    }
</style>